<template>
  <div class="container" v-loading='loading'>
    <div class="statusbar clearfix">
      <div class="w25 back" @click="fnBack()">
        <img src="../../assets/icon/back@2x.png" alt="">
        <span>返回</span>
      </div>
      <div class="w50 topcenter">
        <span>人民调解审批</span>
      </div>
      <div class="w25" v-if='state==1'>
        <span class="topsub" @click='tijiao'>提交</span>
      </div>
    </div>
    <div class="wrap" style="margin-top: 3.3rem;">
      <div class="content">
        <div class="row1 clearfix" style="margin-bottom: 10px;">
          <label for="" class="label">案件编号</label>
          <span>{{artic.code}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;">
          <label for="" class="label">案件状态</label>
          <span v-if="artic.status==0">提交申请</span>
          <span v-if="artic.status==1">已受理</span>
          <span v-if="artic.status==2">已拒绝</span>
          <span v-if="artic.status==3">完成</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.rejectReason">
          <label for="" class="label">拒绝理由</label>
          <span class="describe">{{artic.rejectReason}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.assignToUser">
          <label for="" class="label">处理人</label>
          <span>{{artic.assignToUser}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.processorName">
          <label for="" class="label">最终处理人</label>
          <span>{{artic.processorName}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.status==3">
          <label for="" class="label">处理结果
          </label>
          <span>{{artic.result}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;">
          <label for="" class="label">执行状态</label>
          <span>{{(artic.mediationAction==1)?'当场执行':'其他'}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.approveRemark">
          <label for="" class="label">受理备注</label>
          <span>{{artic.approveRemark}}</span>
        </div>
        <div class="row1 clearfix" style="margin-bottom: 10px;" v-if="artic.finshRemark">
          <label for="" class="label">完成备注</label>
          <span>{{artic.finshRemark}}</span>
        </div>
        <!-- <div class="row1 clearfix" v-if='mediationType==3'  style="border-bottom: 1px solid #f1f1f2;">
          <h4>视频调解注意事项</h4>
          <p>1、视频调解需用到第三方APP，请扫描以下二维码下载：</p>
          <img src="../../assets/erweima.png"  width="60%" alt="">
          <p>2、APP使用时需使用手机的摄像头权限、麦克风权限，所需的权限要求均来自第三方APP，与本系统无关。</p>
        </div> -->
        <p style="color: #39589e;font-weight: 600;font-size: 1.5rem; text-align: left;">申请人信息</p>
        <div class="row1 clearfix">
          <label for="" class="label">姓名</label>
          <span>{{artic.name}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">身份证号</label>
          <span>{{artic.identityNo}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">联系电话</label>
          <span>{{artic.mobilePhone}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">纠纷发生地</label>
          <span>{{artic.takePlace}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">所属区域</label>
          <span>{{artic.district}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">联系地址</label>
          <span>{{artic.address}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">申请时间</label>
          <span>{{artic.creationTime |datas}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">申请事项</label>
          <span>{{artic.reason}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">事项描述</label>
          <span class="describe">{{artic.content}}</span>
        </div>
        <p style="color: #39589e;font-weight: 600;font-size: 1.5rem; text-align: left; margin-top: 15px;">对方信息</p>
        <div class="row1 clearfix">
          <label for="" class="label">对方姓名</label>
          <span class="describe">{{artic.otherPartyName}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">对方电话</label>
          <span class="describe">{{artic.otherPartyTelephone}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">对方地址</label>
          <span class="describe">{{artic.otherPartyAddress}}</span>
        </div>
        <div class="row1 clearfix">
          <label for="" class="label">是否同意调解</label>
          <span class="describe">{{artic.isOtherPartyAgree?'同意':'拒绝'}}</span>
        </div>
        <div v-if='artic.mediationType'>
          <div class="row1 clearfix">
            <label for="" class="label">调解方式</label>
            <!-- <span class="describe">{{(artic.mediationType==1)?((artic.mediationType==2)?'现场调解':'电话调解'):'视频调解'}}</span> -->
            <span class="describe">{{(artic.mediationType==1)?'现场调解':((artic.mediationType==2)?'电话调解':'视频调解')}}</span>
          </div>
          <div class="row1 clearfix">
            <label for="" class="label">调解时间</label>
            <span class="describe">{{artic.mediationTime|yy}}</span>
          </div>
          <div class="row1 clearfix">
            <label for="" class="label">调解信息</label>
            <span class="describe">{{artic.mediationMessage}}</span>
          </div>
        </div>
        <div style="margin-top: 15px;">
          <el-button v-if='state==3' disabled type="success">处理完成</el-button>
          <el-button v-if='state==1' disabled type="success">受理中</el-button>
        </div>
        <div v-if='state==3' class=" clearfix" style="margin-top: 10px;text-align: left;">
          <label for="" class="label" style="color: #39589e;font-weight: 600;font-size: 1.5rem;">评价</label>
          <el-rate disabled :texts=texts style='display: inline-block;' v-model="pingjia" show-text>
          </el-rate>
          <p style="color: #39589e;padding-left: 3.5rem; font-weight: 400;font-size: 1.3rem;margin-top: 1rem;">{{artic.evaluateText}}</p>
        </div>
      </div>
      <div v-if="state==0&&canPeopleMediationApprove" style="margin-top: 15px;padding-bottom: 15px;">
        <!-- <el-button type="success" @click='handle(0)'>受理</el-button> -->
        <el-button type="success" @click='accept'>受理</el-button>
        <el-button type="danger" @click='jujue'>拒绝</el-button>

        <!--<el-button type="info" @click='handle(0)'>安排调解</el-button></div>			
				<el-button type="warning" @click='handle(0)'>指派</el-button>
				<el-button type="success" @click='jujue'>完成</el-button>-->
      </div>

      <div class="content" style="margin-top: 1rem;padding-bottom: 15px;" v-if='state==1'>
        <p style="color: #39589e;font-weight: 600;font-size: 1.5rem; text-align: left;">审批处理</p>
        <div class="row1 clearfix">
          <label for="" class="label">处理方式</label>
          <el-select v-model="value1" placeholder="请选择" class='select'>
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" @click.native='chang'>
            </el-option>
          </el-select>
        </div>
        <div class="row1 clearfix" v-if='value1==4&&canPeopleMediationAction'>
          <label for="" class="label">调解方式</label>
          <el-select v-model="value2" placeholder="请选择" class='select'>
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="row1 clearfix" v-if='value1==4&&canPeopleMediationAction'>
          <label for="" class="label">调解时间</label>
          <input type="date" class="dates" v-model="staDate">
        </div>
        <div class="row1 clearfix" v-if='value1==2&&canPeopleMediationApprove'>
          <label for="" class="label">选择机构</label>
          <el-select v-model="value5" placeholder="请选择" class='select' @change='cks'>
            <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="row1 clearfix" v-if='value1==2&&canPeopleMediationApprove'>
          <label for="" class="label">选择事务所</label>
          <el-select v-model="value4" placeholder="请选择" class='select' @change='ck'>
            <el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row1 clearfix" v-if="value1==2&&canPeopleMediationApprove">
          <label for="" class="label">选择人员</label>
          <el-select v-model="value3" placeholder="请选择" class='select'>
            <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row1 clearfix" v-if='value1==4&&canPeopleMediationAction' style="border-bottom: 1px solid #f1f1f2;">
          <label for="" class="label">调解信息</label>
          <input type="text" class="dates" v-model="tjxx">
        </div>
      </div>
    </div>
    <el-dialog title="备注" :visible.sync="dialogVisibleAccept" width="80%" class='eldoa' style='text-align: left;'>
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="remark">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAccept = false">取 消</el-button>
        <el-button type="primary" @click="handle(0)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="拒绝原因" :visible.sync="dialogVisible" width="80%" class='eldoa' style='text-align: left;'>
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textareas">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handle(1)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="处理结果" :visible.sync="dialogVisible1" width="80%" class='eldoa' style='text-align: left;'>
      <div class="wrap">
        <div class="row1 clearfix" style="border-bottom: 1px solid #f1f1f2;">
          <label style="width: 5.3rem;" for="" class="label">处理结果</label>
          <input type="text" class="dates" v-model="results">
        </div>
        <div class="row1 clearfix" style="border-bottom: 1px solid #f1f1f2;">
          <label style="width: 5.3rem;" for="" class="label">处理人</label>
          <input type="text" class="dates" v-model="persons">
        </div>

        <div class="row1 clearfix" style="border-bottom: 1px solid #f1f1f2;">
          <label style="width: 5.3rem;" for="" class="label">执行状态</label>
          <div class="radio clearfix">
            <el-radio v-model="mediationAction" label="1">当场执行</el-radio>
            <el-radio v-model="mediationAction" label="2">其他</el-radio>
          </div>
        </div>
        <div class="row clearfix" v-if="mediationAction==2">
          <label class="label">完成备注
            <span class="red">*</span>
          </label>
          <el-input type="textarea" class='adss' v-model="finshRemark">
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="resul()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "appdetails",
  data() {
    return {
      results: "",
      persons: "",
      mediationAction: "1",
      finshRemark: "",
      dialogVisible1: false,
      dialogVisible: false,
      dialogVisibleAccept: false,
      loading: "",
      name: "李四",
      d: "",
      artic: {},
      options1: [
        {
          value: "2",
          label: "指派"
        },
        {
          value: "4",
          label: "安排调解"
        },
        {
          value: "3",
          label: "完成"
        }
      ],
      value1: "",
      options2: [
        {
          value: 1,
          label: "现场调解"
        },
        {
          value: 2,
          label: "电话调解"
        },
        {
          value: 3,
          label: "视频调解"
        }
      ],
      value2: "",
      options3: [],
      options5: [
        {
          value: 4,
          label: "司法所"
        }
      ],
      value5: 4,
      value3: "",
      options4: [],
      value4: "",
      staDate: "",
      state: 5,
      remark: "",
      textareas: "",
      tjxx: "",
      canPeopleMediationApprove: false,
      canPeopleMediationAction: false,
      texts: ["极差", "差", "一般", "满意", "非常满意"],
      pingjia: 0,
      mediationType: null
    };
  },
  beforeCreate() {
    this.openIds();
  },
  created() {
    this.id = this.$route.params.id;
    this.canPeopleMediationApprove =
      localStorage.canPeopleMediationApprove === "true" ? true : false;
    this.canPeopleMediationAction =
      localStorage.canPeopleMediationAction === "true" ? true : false;
    this.GetPeopleMediation();
    this.GetAllServiceAgency();
  },
  methods: {
    chang() {
      console.log(this.value1);
      if (this.value1 == "3") {
        if (this.canPeopleMediationAction == true) {
          this.dialogVisible1 = true;
        } else {
          this.$message.error("对不起，该用户没有操作权限");
        }
      }
      if (this.value1 == "4") {
        if (!(this.canPeopleMediationAction == true)) {
          this.$message.error("对不起，该用户没有操作权限");
        }
      }
      if (this.value1 == "2") {
        if (!(this.canPeopleMediationApprove == true)) {
          this.$message.error("对不起，该用户没有操作权限");
        }
      }
    },
    dispose() {
      this.dialogVisible1 = true;
    },
    resul() {
      if (this.results == "") {
        this.$message.error("处理结果不能为空");
        return false;
      }
      if (this.persons == "") {
        this.$message.error("处理人不能为空");
        return false;
      }
      if (this.mediationAction == "2" && this.finshRemark == "") {
        this.$message.error("备注不能为空");
        return false;
      }
      let meAction = Number(this.mediationAction);
      this.loading = true;
      this.$post(Api.Action, {
        rejectReason: this.textareas,
        mediationAction: meAction,
        finshRemark: this.finshRemark,
        assignTo: 0,
        result: this.results,
        processorName: this.persons,
        type: "1",
        actionCode: 3,
        id: this.id
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          this.dialogVisible1 = false;
          this.$router.push({
            path: "/HandleResult"
          });
          // window.location.href = window.location.href;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    // 受理
    accept() {
      this.dialogVisibleAccept = true;
    },
    jujue() {
      this.dialogVisible = true;
    },
    //返回上一页
    fnBack() {
      this.$router.push({
        path: "/Onapprove"
      });
    },
    GetPeopleMediation() {
      this.loading = true;
      this.$post(Api.GetPeopleMediation, {
        id: this.id
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.artic = res.data.result;
          this.state = this.artic.status;
          this.pingjia = this.artic.evaluate;
          this.mediationType = this.artic.mediationType;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    cks() {
      this.GetAllServiceAgency();
    },
    ck() {
      this.GetLegalAidAssignUsers();
    },
    //获取所有律师事务所
    GetAllServiceAgency() {
      this.options4 = [];
      this.value4 = "";
      this.$post(Api.GetAllServiceAgency, {
        type: this.value5
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.options4 = res.data.result;
          this.value4 = this.options4.length > 0 ? this.options4[0].id : "";
          this.GetLegalAidAssignUsers();
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    //通过律师事务所获取律师
    GetLegalAidAssignUsers() {
      this.options3 = [];
      this.value3 = "";
      this.$post(Api.GetPeopleMediationAssignUsers, {
        serviceAgencyId: this.value4
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.loading = false;
          this.options3 = res.data.result;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    },
    tijiao() {
      if (this.value1 == 2) {
        if (this.value3 == "") {
          this.$message.error("指派人员不能为空");
          return false;
        }
        this.loading = true;
        this.$post(Api.Action, {
          rejectReason: this.textareas,
          assignTo: this.value3,
          result: "",
          processorName: "",
          type: "1",
          actionCode: 2,
          id: this.id
        }).then(res => {
          if (res.data.success == true) {
            this.loading = false;
            this.dialogVisible = false;
            this.$router.push({
              path: "/HandleResult"
            });
            // window.location.href = window.location.href;
          } else {
            this.loading = false;
            this.$message.error(res.data.error.message);
          }
        });
      } else {
        if (this.value2 == "") {
          this.$message.error("调解方式不能为空");
          return false;
        } else if (this.staDate == "") {
          this.$message.error("调解时间不能为空");
          return false;
        } else if (this.tjxx == "") {
          this.$message.error("调解信息不能为空");
          return false;
        }
        this.loading = true;
        this.$post(Api.PostPeopleMediation, {
          id: this.id,
          mediationTime: this.staDate,
          mediationMessage: this.tjxx,
          mediationType: this.value2
        }).then(res => {
          if (res.data.success == true) {
            this.loading = false;
            this.dialogVisible = false;
            this.$router.push({
              path: "/HandleResult"
            });
            // window.location.href = window.location.href;
          } else {
            this.loading = false;
            this.$message.error(res.data.error.message);
          }
        });
      }
    },
    handle(types) {
      this.loading = true;
      this.$post(Api.Action, {
        rejectReason: this.textareas,
        approveRemark: this.remark,
        assignTo: 0,
        result: "",
        processorName: "",
        type: "1",
        actionCode: types,
        id: this.id
      }).then(res => {
        if (res.data.success == true) {
          this.loading = false;
          this.dialogVisible = false;
          this.$router.push({
            path: "/HandleResult"
          });
          // window.location.href = window.location.href;
        } else {
          this.loading = false;
          this.$message.error(res.data.error.message);
        }
      });
    }
  }
};
</script>
<style scoped>
.wrap .row {
  width: 100%;
  line-height: 3.3rem;
  border-bottom: 1px solid #f1f1f2;
  color: #606266;
}
.wrap .row .label {
  display: inline-block;
  width: 8.3rem;
  float: left;
  text-align: left;
  font-size: 1.3rem;
  color: #5a5959;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 1.6rem;
  box-sizing: border-box;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
}

.mask .model {
  background-color: #ffffff;
  border-radius: 0.8rem;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.8rem;
}

.mask .model p {
  display: inline-block;
  width: 100%;
}

.mask .model .h1 {
  font-size: 1.5rem;
  color: #595757;
  text-align: center;
  font-weight: 600;
  line-height: 4rem;
}

.mask .model .h2 {
  font-size: 1.1rem;
  color: #333;
  text-align: left;
  font-weight: 600;
}

.mask .model .h3 {
  font-size: 1.1rem;
  color: #333;
  text-align: left;
  text-indent: 2rem;
  line-height: 2rem;
}

.mask .model .btn {
  width: 100%;
  margin: 0.8rem 0;
}

.mask .model .btn button {
  width: 60%;
  font-size: 1.25rem;
  padding: 0.4rem 0;
  outline: none;
  border: none;
  color: #ffffff;
  border-radius: 0.8rem;
  background-color: #39589e;
}

.wrap {
  padding-bottom: 0 !important;
}

.wrap .content {
  padding: 0.8rem 1.6rem;
}

.wrap .row1 {
  width: 100%;
  line-height: 4rem;
  border-bottom: 1px solid #f1f1f2;
  color: #606266;
}

.wrap .row1 .dates {
  width: calc(100% - 9rem);
  border: none;
  outline: none;
  font-size: 1.25rem;
  color: #606266;
  text-indent: 0.5rem;
}

.wrap .row1:last-child {
  border-bottom: none;
}

.wrap .row1 .label {
  display: inline-block;
  width: 8.3rem;
  float: left;
  text-align: left;
  font-size: 1.3rem;
  color: #595757;
}

.wrap .row1 .radio {
  box-sizing: border-box;
  width: calc(100% - 9rem);
  height: 2.5rem;
  border-radius: 0.4rem;
  outline: none;
  border: none;
  float: right;
  font-size: 1.3rem;
  text-align: left;
}
/* L：修改radio样式 */
.wrap .row1 .radio .el-radio + .el-radio {
  margin-left: 0;
}

.wrap .row1 span {
  box-sizing: border-box;
  width: calc(100% - 9rem);
  height: 2.5rem;
  border-radius: 0.4rem;
  font-size: 1.3rem;
  color: #1a1a1a;
  text-align: left;
  display: inline-block;
}

.wrap .row1 .select {
  box-sizing: border-box;
  width: calc(100% - 9rem);
  height: 2.5rem;
  border-radius: 0.4rem;
  outline: none;
  border: none;
  font-size: 1.3rem;
}

.wrap .row1 .btn button {
  float: left;
  outline: none;
  border: none;
  color: #5a5959;
  font-size: 1.25rem;
  border-radius: 0.4rem;
  padding: 0.4rem 0.8rem;
  margin: 0.4rem;
  background-color: #efefef;
}

.wrap .row1 .btn button.active {
  color: #fff !important;
  background-color: #39589e !important;
}

.wrap .row1 .describe {
  line-height: 3rem;
  height: auto;
  word-wrap: break-word;
  word-break: normal;
}

.wrap .row1 textarea {
  outline: none;
  border: none;
  width: 100%;
  font-size: 1.25rem;
  color: #606266;
  font-family: "微软雅黑";
}

.red {
  color: red;
}

.ends {
  background: #e6e6e6;
  margin-top: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>